<template>
  <div class="address_box" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="edit_box">
      <div class="title_box">新增收货地址<span>(已有<label>{{ addressList.length?addressList.length:0 }}</label>个收货地址最多添加10个收货地址)</span></div>
      <div class="content_box_infos_tabcar address_tabs input_shure">
        <div class="tab_infos_input">
          <div class="titles">收货人姓名：</div>
          <input style="width: 229px" v-model="addressInfo.name" placeholder="请输入用户名"/>
        </div>
        <div class="tab_infos_input">
          <div class="titles">收货地区：</div>
          <div style="display: flex;justify-content: space-between;width: 229px">
            <el-select v-model="pro_id" placeholder="请选择">
              <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="addressInfo.city_id" placeholder="请选择">
              <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="tab_infos_input">
          <div class="titles">详细地址：</div>
          <input style="width: 504px;height: 30px" v-model="addressInfo.address" placeholder="请输入详细地址"/>
        </div>
        <div style="display: flex;">
          <div class="tab_infos_input">
            <div class="titles">联系手机：</div>
            <input style="width: 166px" v-model="addressInfo.phone" placeholder="请输入"/>
          </div>
          <div class="tab_infos_input">
            <div class="titles">联系座机：</div>
            <input style="width: 166px" v-model="addressInfo.landline" placeholder="请输入"/>
          </div>
        </div>
        <div class="save_infos" @click="userSavedAdress">保存</div>
      </div>
    </div>
    <div class="address_list">
      <div class="tip_title">已有地址</div>
      <div class="head_infos">
        <div class="people">收货人</div>
        <div class="address">收货人地址</div>
        <div class="phone">联系手机</div>
        <div class="qu_toa">操作</div>
      </div>
      <div class="head_infos body_content" v-for="(item,index) in addressList" :key="index">
        <div class="people">{{ item.name }}</div>
        <div class="address">{{ item.pro_name }}{{ item.city_name }}{{ item.address }}</div>
        <div class="phone">{{ item.phone }}</div>
        <div class="qu_toa car_info">
          <div class="btn_content" @click="editShow(item)">修改</div>
          <div class="btn_content" @click="DeleteAddress(item.id)">删除</div>
          <div class="tips_defuate" v-if="item.is_default==1">默认地址</div>
          <div class="btn_duf" @click="SetAddressDefault(item.id)" v-else>设为默认</div>
        </div>
      </div>
    </div>
    <transition name="slide-fade">
      <div class="city_location_box" v-if="addressInfoShow">
        <div class="location_box">
          <div class="tips_title">编辑收货地址</div>
          <div class="line"></div>
          <img @click="addressInfoShow=false" src="../../../assets/window-icon-close-black.png" class="close">
          <div class="content_box_infos_tabcar address_tabs">
            <div class="tab_infos_input">
              <div class="titles">收货人姓名：</div>
              <input v-model="editUserInfo.name" placeholder="请输入用户名"/>
            </div>
            <div class="tab_infos_input">
              <div class="titles">收货地区：</div>
              <div style="display: flex;justify-content: space-between;width: 220px">
                <el-select v-model="pro_id" placeholder="请选择">
                  <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="editUserInfo.city_id" placeholder="请选择">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="tab_infos_input" style="align-items: flex-start">
              <div class="titles">详细地址：</div>
              <textarea v-model="editUserInfo.address" placeholder="请输入详细地址"/>
            </div>
            <div class="tab_infos_input">
              <div class="titles">联系手机：</div>
              <input v-model="editUserInfo.phone" placeholder="请输入"/>
            </div>
            <div class="tab_infos_input">
              <div class="titles">联系座机：</div>
              <input v-model="editUserInfo.landline" placeholder="请输入"/>
            </div>
          </div>
          <div class="tips_btn">
            <div @click="addressInfoShow=false">取消</div>
            <div @click="userSavedAdress(1)">确认</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {deleteAddress, getAddressList, getCity, setAddressDefault, getProvince, saveAddress} from "@/api/apis";

export default {
  name: "userAddress",
  data() {
    return {
      addressInfo: {
        city_id: '',
        name: '',
        address: '',
        phone: '',
        landline: '',
        id: '',
        pro_id: '',
      },
      addressList: [],
      pro_id: '',
      provinceList: [],
      cityList: [],
      addressInfoShow: false,
      fullscreenLoading: false,
      editUserInfo: {}
    }
  },
  watch: {
    pro_id(val) {
      this.addressInfo.city_id = ''
      if (val) {
        this.getCity(val)
      }
    }
  },
  methods: {
    SetAddressDefault(e) {
      let data = {id: e}
      setAddressDefault(data).then(res => {
        this.$message.success('操作成功')
        this.GetAddressList()
      })
    },
    editShow(item) {
      this.fullscreenLoading = true
      this.pro_id = item.pro_id
      setTimeout(() => {
        this.editUserInfo = item
        this.addressInfoShow = true
        this.fullscreenLoading = false
      }, 500)
    },
    DeleteAddress(e) {
      let data = {id: e}
      this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAddress(data).then(res => {
          this.$message.success('操作成功')
          this.GetAddressList()
        })
      }).catch(() => {

      });
    },
    // 获取收货地址列表
    GetAddressList() {
      getAddressList().then(res => {
        this.addressList = res.data
      })
    },
    // 获取地区
    GetProvince() {
      getProvince().then(res => {
        this.provinceList = res.data
      })
    },
    getCity(id) {
      let data = {pro_id: id}
      getCity(data).then(res => {
        this.cityList = res.data
      })
    },
    userSavedAdress(e) {
      let data = {}
      this.addressInfo.pro_id = this.pro_id
      if (e == 1) {
        data = this.editUserInfo
      } else {
        data = this.addressInfo
      }
      saveAddress(data).then(res => {
        this.$message.success('操作成功')
        this.addressInfoShow = false
        this.GetAddressList()
        this.pro_id = ''
        this.editUserInfo = {
          city_id: '',
          name: '',
          address: '',
          phone: '',
          landline: '',
          id: '',
          pro_id: ''
        }
        this.addressInfo = {
          city_id: '',
          name: '',
          address: '',
          phone: '',
          landline: '',
          id: '',
          pro_id: ''
        }
      })
    },
  },
  mounted() {
    this.GetAddressList()
    this.GetProvince()
  }
}
</script>

<style scoped lang="less">
.address_box {
  .edit_box {
    margin-bottom: 30px;

    .title_box {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      margin-bottom: 19px;

      span {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        margin-left: 9px;

        label {
          color: #B11E24;
        }
      }
    }
  }

  .address_list {
    .tip_title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 16px;
      color: #000000;
    }

    .head_infos {
      width: 590px;
      height: 36px;
      background: #000000;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .people {
        width: 90px;
      }

      .address {
        width: 206px;
      }

      .phone {
        width: 107px;
      }

      .qu_toa {
        width: 155px;
      }
    }

    .body_content {
      height: 76px;
      background: #FFFFFF;
      color: #000000;
      border-bottom: 1px solid #C7C7C7;

      .car_info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn_content {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
        }

        .tips_defuate {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #B11E24;
        }

        .btn_duf {
          width: 56px;
          height: 20px;
          background: #B11E24;
          opacity: 1;
          border-radius: 2px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 20px;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }
  }
}

.content_box_infos_tabcar {
  width: 301px;
  margin: 0 auto 30px;

  .tab_infos_input {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .titles {
      text-align: right;
      width: 80px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }

    input {
      width: 220px;
      height: 30px;
      background: #FFFFFF;
      padding: 0 12px;
      border: 1px solid #C7C7C7;
      box-sizing: border-box;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #C7C7C7;
    }

    textarea {
      width: 220px;
      height: 49px;
      padding: 7px 11px;
      background: #FFFFFF;
      border: 1px solid #C7C7C7;
      box-sizing: border-box;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #C7C7C7;
      resize: none;
    }

    .btns {
      width: 68px;
      height: 30px;
      background: #B11E24;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
      color: #FFFFFF;
      text-align: center;
    }
  }

  .Tab_cars {
    padding: 17px 20px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    background: #F7F7F7;

    .top {
      display: flex;
      margin-bottom: 10px;
    }
  }
}

.address_tabs {
  width: 323px;

  .tab_infos_input {
    .titles {
      width: 100px;
    }
  }

  .save_infos {
    margin-top: 10px;
    width: 98px;
    height: 30px;
    background: #B11E24;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 30px;
    color: #FFFFFF;
    margin-left: 100px;
    text-align: center;
  }
}

/deep/ .el-input--suffix {
  width: 110px;
}

.city_location_box {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.21);
  left: 0;
  bottom: 0;
  z-index: 8;

  .location_box {
    width: 480px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #9D9D9D;
    padding: 32px 0 30px;
    z-index: 10;
    background: #FFFFFF;

    .tips_title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      margin-bottom: 17px;
      text-align: center;
    }

    .line {
      width: 477px;
      height: 2px;
      background: #E9E9E9;
      box-sizing: border-box;
      margin-bottom: 37px;
    }

    .tips_btn {
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        width: 69px;
        height: 30px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 30px;
        cursor: pointer;
        text-align: center;
      }

      div:nth-child(1) {
        border: 1px solid #C7C7C7;
        color: #9D9D9D;
        box-sizing: border-box;
        margin-right: 10px;
      }

      div:nth-child(2) {
        color: #FFFFFF;
        background: #B11E24;
      }
    }

    .close {
      width: 18px;
      height: 18px;
      position: absolute;
      z-index: 7;
      right: 10px;
      cursor: pointer;
      top: 10px;
    }
  }

  /deep/ .el-input--suffix {
    width: 105px;
  }
}

.input_shure {
  width: auto;
}

/deep/ .el-input__icon {
  line-height: 30px;
}


/deep/ .el-select .el-input__inner {
  height: 30px;
}

/deep/ .el-select .el-input .el-input__inner {
  border-color: #C7C7C7 !important;
}
</style>